<template>
	<view class="page page-block">
		<cl-toast ref="cl-toast"></cl-toast>
		<cl-action-sheet ref="cl-action-sheet"></cl-action-sheet>
		<cl-confirm ref="cl-confirm"></cl-confirm>
		<view class="setting-wrapper">
			<cl-list v-for="(item, index) in list" :key="index" :border="false" :label="item.lable" @tap="click(item.type)">
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list>
		</view>
		<view v-if="$common.hasLogin" class="page-block footer-wapper">
			<cl-button @tap="logout">
				<text class="exit-text">退出登录</text>
			</cl-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						lable: "头像与个人信息",
						type: "0",
						url: "./userInfo/userInfo"
					},
					{
						lable: "账号与安全",
						type: "1",
						url: "./accountSecurity/accountSecurity"
					},
					{
						lable: "检查更新",
						type: "2",
						url: ""
					},
					{
						lable: "关于",
						type: "3",
						url: "./about/about"
					}
				]
			}
		},
		methods: {
			showToast(text) {
				this.$refs["cl-toast"].open(text);
			},
			logout() {
				this.$refs["cl-action-sheet"].open({
					list: [{
							label: "退出登录会清除你的登录信息，确认退出吗？",
							disabled: true,
							size: "26rpx"
						},
						{
							label: "退出登录",
							color: "red",
							click: done => {
								this.$refs["cl-confirm"]
									.open({
										title: "提示",
										message: "再次确认是否退出"
									})
									.then(() => {
										this.showToast("你已成功退出");
										this.$common.setHasLogin(false);
										this.$common.setUser(null);
										done();
										setTimeout(function() {
											uni.switchTab({
												url: "../mine/mine"
											})
										}, 1000)
									});
							}
						}
					]
				});
			},
			click(type) {
				if (type == 2) {
					uni.showLoading({
						title: '检查更新中...',
						duration: 1500,
					});
					setTimeout(function() {
						uni.hideLoading();
						uni.showToast({
							title: '当前已是最新版本',
							icon: 'none',
							duration: 1500,
						})
					}, 1000);
				} else {
					uni.navigateTo({
						url: this.list[type].url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("setting.css");

	/deep/ .cl-list {
		&__label {
			font-size: 16px;
		}
	}

	/deep/ .cl-button {
		border-top: 1rpx solid #dcdfe6;
		padding: 10rpx 30rpx 30rpx;
	}
</style>
